<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Host Performance Monitor</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .monitor { padding: 20px; }
        .data { margin-bottom: 10px; }
    </style>
</head>
<body>
<div class="monitor">
    <div id="cpu" class="data">CPU Usage: Loading...</div>
    <div id="memory" class="data">Memory Usage: Loading...</div>
</div>

<script>
    // 这里假设我们有一个后端API提供性能数据
    async function fetchPerformanceData() {
        const response = await fetch('/api/performance/host');
        const data = await response.json();
        // console.log(response)
        // console.log(data)

        document.getElementById('cpu').innerText = `CPU Usage: ${data.cpu}%`;
        document.getElementById('memory').innerText = `Memory Total: ${data.mems.total} GiB\r\nMemory Usage: ${data.mems.used} GiB\r\nMemory available: ${data.mems.available} GiB\r\nMemory free: ${data.mems.free} GiB`;
    }

    // 每隔一段时间刷新数据
    setInterval(fetchPerformanceData, 10*1000); // 每10秒更新一次
    fetchPerformanceData(); // 初始化时立即加载数据
</script>
</body>
</html>